import React, { Component } from 'react'
/**
 * 在父组件调用子组件的地方，添加自定义的属性，属性的值就是需要传递给子组件的值
 * 如果属性的值是变量，boolean类型，number类型，对象，数组，函数，null，undefined，使用{}包裹
 * 
 * 如果子组件是类组件
 *  1.验证传递的数据的数据类型，需要使用 第三方模块 prop-types 
 *    Com.propTypes = { 自定义的属性名: PropTypes.数据类型 }
 *  2.如果属性的值是必传项
 *    Com.propTypes = { 自定义的属性名: PropTypes.数据类型.isRequired }
 *  3.如果属性的值是多种数据类型
 *    Com.propTypes = { 自定义的属性名: PropTypes.oneOfType([
 *      PropTypes.数据类型1, PropTypes.数据类型2 
 *    ]) }
 *  4.如果需要设置属性的默认值，通过在类中 使用  static defaultProps = { 属性: 属性值 }
 * 
 *  在子组件中可以通过 this.props.自定义属性名 访问数据
 * 
 * 如果子组件是函数式组件
 *  1.验证传递的数据的数据类型，需要使用 第三方模块 prop-types 
 *    Com.propTypes = { 自定义的属性名: PropTypes.数据类型 }
 *  2.如果属性的值是必传项
 *    Com.propTypes = { 自定义的属性名: PropTypes.数据类型.isRequired }
 *  3.如果属性的值是多种数据类型
 *    Com.propTypes = { 自定义的属性名: PropTypes.oneOfType([
 *      PropTypes.数据类型1, PropTypes.数据类型2 
 *    ]) }
 *  4.如果需要设置属性的默认值，Com.defaultProps = { 属性: 属性值 }
 * 
 *  在子组件中可以通过 props.自定义属性名 访问数据
 */
function Title (props) {
  return (
    <h1>
      标题 - { props.name }
    </h1>
  )
} 

class Content extends Component {
  render () {
    return (
      <section>
        内容 - { this.props.name }
      </section>
    )
  }
}
class App extends Component {
  render() {
    return (
      <>
        <Title name="title"></Title>
        <Content name="content"></Content>
      </>
    )
  }
}
export default App
